@use 'sass:map';
@use '@angular/material' as mat;
@use '@gravitee/ui-particles-angular' as gio;
@use 'src/scss/gio-layout' as gio-layout;

$typography: map.get(gio.$mat-theme, typography);

:host {
  @include gio-layout.gio-full-width-content-container;
}

.card {
  max-width: 380px;
  margin: 100px auto 0 auto;
  padding: 32px;

  &__header {
    display: flex;
    flex-direction: column;

    &__logo {
      width: 200px;
      padding: 24px 0;
      align-self: center;
    }

    &__title {
      @include mat.typography-level($typography, 'headline-6');
    }

    &__subtitle {
      @include gio.subtitle-typography();
      padding-bottom: 16px;
    }
  }

  &__form {
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;

    &__input {
      flex: 1 1 auto;
      padding-bottom: 8px;
    }

    &__error {
      @include mat.typography-level($typography, 'caption');
      padding-bottom: 8px;
    }

    &__goTo {
      padding-top: 16px;
      text-align: center;
    }
  }
}
